<template>
	<view class="topic-wrap">
		<view class="circle-nav">
			<scroll-view class="circle-list" scroll-x="true">
				<text v-for="(gruopItem, gruopIndex) in groupInfo.groupList" :key="gruopIndex" class="circle-item"
					@click="tabCut(gruopItem.cate_id, gruopIndex)"
					:class="gruopIndex == groupInfo.currIdent ? 'tab-text active tab-text-border' : ''">
					{{ gruopItem.cate_name }}
				</text>
			</scroll-view>
		</view>
		<view v-for="(item, index) in circleListInfo" :key="index" @click="goCircle(item.topic_id)">
			<view class="topic-list u-p-30 u-flex u-row-between">
				<view class="u-flex">
					<image class="topic-avatar" :src="$util.img(item.cover_image)" :lazy-load="ture"></image>
					<view class="topic-info u-m-l-20 u-row-left">
						<view class="topic-title">{{item.topic_name}}</view>
						<view class="topic-desc">{{item.description}}</view>
					</view>
				</view>
				<view>
					<u-button size="mini" :custom-style="customStyle" @click="goCircle(item.topic_id)">进入圈子</u-button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import Config from '../../common/js/config.js'
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				groupInfo: {
					groupList: [],
					currIdent: 0,
					currId: 1 //首个tabs选项卡
				},
				circleListInfo: [],
				lastPage: 1,
				currentPage: 1,
				status: 'loadmore',
				showEmpty: false,
				customStyle: {
					backgroundColor: '#262239',
					color:'#FFFFFF'
					
				}
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		onLoad() {
			this.getGroup();
			this.getCircleList();
			//登录后查询
			if (uni.getStorageSync('userInfo')) {
				this.member_id = uni.getStorageSync('userInfo').member_id
			}
		},
		onReachBottom() {

		},
		mixins: [globalConfig],
		methods: {
			//圈子分类
			getGroup() {
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/social/api/topic/cate',
					success: res => {
						this.showEmpty = true;
						if (res.code == 0) {
							if (res.data.length != 0) {
								this.groupInfo.groupList = res.data;
								this.groupInfo.currId = res.data[0].cate_id;
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//圈子列表
			getCircleList() {
				this.loadStatus = 'loading';
				this.$api.sendRequest({
					url: '/social/api/topic/index',
					data: {
						page: this.currentPage,
						cate_id: this.groupInfo.currId
					},
					success: res => {
						if (res.code == 0) {
							this.circleListInfo = [...this.circleListInfo, ...res.data.data];
							this.isEmpty = !this.circleListInfo.length;
							this.lastPage = res.data.last_page;
							this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			/* 切换标签页 */
			tabCut(cateId, index) {
				this.groupInfo.currIdent = index;
				this.groupInfo.currId = cateId;
				this.circleListInfo = [];
				this.getCircleList();
			},
			//跳转圈子列表
			/*goCircle(postId) {
				this.$util.redirectTo('/newpages/social/found-list', {
					topic_id: topicId
				});
			},*/
			goCircle(topicId) {
				this.$util.redirectTo('/newpages/social/found-list', {
					topic_id: topicId
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	//选项卡切换颜色
	.tab-text {
		color: #262239;
	}

	.tab-text-border {
		color: #262239;
	}

	//选项卡样式
	.circle-nav {
		overflow: hidden;
		padding: 0 20rpx;
		background-color: #fff;

		.circle-list {
			display: flex;
			align-items: center;
			width: 100%;
			height: 90rpx;
			white-space: nowrap;

			.circle-item {
				&.active {
					border-bottom: 4rpx solid;
				}

				display: inline-block;
				margin: 0 20rpx;
				height: 86rpx;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}

	//
	.topic-wrap {
		background: #FFFFFF;
		height: 100vh;
	}

	.topic-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.topic-list {
		background: #FFFFFF;
	}

	.topic-title {}

	.topic-desc {
		color: #949494;
		font-size: 0.8rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		display: box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
